<template>
  <div class="app-container">
    <div class="goodsInfo">
      <div class="left" style="width: 70%">
        <el-form ref="form" :rules="rules" :model="queryParams" label-suffix=":" label-width="120px">
          <el-form-item prop="originalBox">
            <el-checkbox v-model="checked" @change="changeBox">{{
              $t("warehousingLang.OriginalBoxStorage")
            }}</el-checkbox>
          </el-form-item>
          <el-form-item prop="boxNumber" :label="$t('goodsSKULang.boxNumber')">
            <el-input
              ref="input"
              v-model.lazy="queryParams.boxNumber"
              :placeholder="$t('pleaseScan') + $t('goodsSKULang.boxNumber')"
              style="width: 40%"
              @keyup.enter.native="getBoxNumberInfo"
            />
          </el-form-item>
          <el-form-item prop="containerCode" :label="$t('containerLang.containerCode')">
            <el-input
              ref="containerCode"
              v-model.lazy="queryParams.containerCode"
              :placeholder="$t('pleaseScan') + $t('containerLang.containerCode')
              "
              style="width: 40%"
              :disabled="containerDisabled"
              @keyup.enter.native="getContainerCodeInfo"
            />
          </el-form-item>
          <el-form-item prop="skuCode" :label="$t('goodsSKULang.skuCode')">
            <el-input
              ref="skuCode"
              v-model.lazy="queryParams.skuCode"
              :placeholder="$t('pleaseScan') + $t('goodsSKULang.skuCode')"
              :disabled="skuDisabled"
              style="width: 40%"
              @keyup.enter.native="getSkuCodeInfo"
            />
          </el-form-item>
          <el-form-item prop="skuNum" :label="$t('goodsSKULang.skuNum')">
            <el-input
              v-if="readonly === false"
              v-model.number="queryParams.skuNum"
              type="number"
              :placeholder="$t('pleaseEnter')"
              :readonly="readonly"
              style="width: 40%"
            />
            <div v-else class="el-input-scan">
              <span>{{ queryParams.skuNum }} </span>
            </div>
            <el-button
              v-if="readonly === true"
              type="primary"
              round
              size="mini"
              style="position: absolute; margin-left: 5px"
              @click="changeToInputMode"
            >
              {{ $t("statusLang.changeToInputMode") }}</el-button>
            <el-button
              v-else
              type="primary"
              round
              size="mini"
              style="position: absolute; margin-left: 5px"
              @click="changeToScanMode"
            >
              {{ $t("statusLang.changeToScanMode") }}</el-button>
          </el-form-item>
          <el-form-item prop="packagingType" :label="$t('unitLang.weight') + $t('unitLang.size')">
            <el-table :data="queryParams.weightSizeData" border>
              <el-table-column
                prop="inStockType"
                align="center"
                :label="$t('warehousingLang.warehousingType')"
                min-width="80"
              >
                <template v-slot="{ row }">
                  <div :class="row.inStockType === 0 ? 'active' : ''">
                    <span>{{
                      row.inStockType === 0
                        ? $t("warehousingLang.firstArrival")
                        : $t("warehousingLang.toTheWarehouseAgain")
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuCode" align="center" :label="$t('goodsSKULang.skuCode')" min-width="80" />
              <el-table-column align="center" min-width="100" prop="packagingType">
                <template slot="header">
                  <i style="color: #f56c6c; margin-right: 5px">*</i>
                  <span>{{ $t("warehousingLang.packageType") }}</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.packagingType'"
                    :rules="{
                      required: true,
                      message: $t('pleaseSelect'),
                      trigger: 'change',
                    }"
                  >
                    <el-select v-model="scope.row.packagingType" :placeholder="$t('pleaseSelect')">
                      <el-option
                        v-for="item in packageTypeOptions"
                        :key="item.value"
                        :value="item.value"
                        :label="$t('warehousingLang.' + item.title)"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="skuWeight" align="center" :label="$t('unitLang.weight') + '(KG)'" min-width="90">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuWeight'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuWeight"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.weight')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="skuLength" align="center" :label="$t('unitLang.length') + '(CM)'" min-width="90">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuLength'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuLength"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.length')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="skuWidth" align="center" :label="$t('unitLang.width') + '(CM)'" min-width="90">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuWidth'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuWidth"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.width')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="skuHeight" align="center" :label="$t('unitLang.height') + '(CM)'" min-width="90">
                <template v-slot="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuHeight'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuHeight"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.height')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="start">
          <el-button type="primary" style="width: 20%; margin-left: 120px" @click="handleSubmit">{{ $t("submit")
          }}</el-button>
        </el-row>
      </div>
      <!-- 普通打印 -->
      <vue-easy-print v-show="isShow" ref="easyPrintBoxGeneral" table-show :one-page-row="onePageRow">
        <vue-barcode
          line-color="#000"
          display-value="true"
          format="CODE128"
          font="bold"
          :value="queryParams.containerCode"
          text-align="center"
          text-position="bottom"
          text-margin="5"
          font-size="26"
          height="60"
          width="2"
          class="barCode"
        />
      </vue-easy-print>

      <div class="right" style="width: 30%">
        <h3>{{ this.$t("harvestLang.packingList") + " : " }}</h3>
        <el-table :data="tableData" border>
          <el-table-column :label="$t('tableIndex')" type="index" align="center" min- width="80" />
          <el-table-column :label="$t('goodsSKULang.skuCode')" align="center" prop="skuCode" min-width="120" />
          <el-table-column :label="$t('goodsSKULang.forecastQuantity')" align="center" prop="preSkuNum" min-width="100" />
        </el-table>
      </div>
    </div>
    <div class="uploadInfo" style="margin-top: 20px; padding: 0 10px 20px 50px; position: relative;">
      <el-row type="flex" justify="start">
        <el-button type="primary" @click="handleUpload">{{
          $t("upload")
        }}</el-button>
        <el-button type="warning" plain @click="deleteSelectItem">{{
          $t("delete")
        }}</el-button>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="uploadInfoData"
        tooltip-effect="dark"
        class="mt-10"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" min-width="20" />
        <el-table-column :label="$t('tableIndex')" align="center" type="index" min-width="55" />
        <el-table-column :label="$t('goodsSKULang.boxNumber')" min-width="120" prop="boxNumber" align="center" />
        <el-table-column prop="skuCode" :label="$t('goodsSKULang.skuCode')" min-width="120" align="center" />
        <el-table-column :label="$t('warehousingLang.receiptQuantity')" prop="receiptNum" min-width="80" align="center" />
        <el-table-column prop="containerCode" :label="$t('containerLang.containerCode')" min-width="120" align="center" />
        <el-table-column prop="skuWeight" align="center" :label="$t('unitLang.weight') + '(KG)'" min-width="90" />
        <el-table-column prop="skuLength" align="center" :label="$t('unitLang.length') + '(CM)'" min-width="90" />
        <el-table-column prop="skuWidth" align="center" :label="$t('unitLang.width') + '(CM)'" min-width="90" />
        <el-table-column prop="skuHeight" align="center" :label="$t('unitLang.height') + '(CM)'" min-width="90" />
        <el-table-column prop="operator" :label="$t('goodsSKULang.operator')" min-width="80" align="center" />
        <el-table-column prop="operationDate" :label="$t('operationDate')" min-width="80" align="center" />
      </el-table>

      <div ref="autoPrint" style="position: absolute; z-index: -9; bottom: -10px; left: 50px; padding: 20px 30px;">
        <vue-barcode
          line-color="#000"
          display-value="true"
          format="CODE128"
          font="bold"
          :value="printContainerCode"
          text-align="center"
          text-position="bottom"
          text-margin="5"
          font-size="18"
          height="100"
          width="2"
          class="barCode"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import dayjs from 'dayjs'
import to from 'await-to-js'
import VueBarcode from 'vue-barcode'
import vueEasyPrint from 'vue-easy-print'
import { packageTypeDict } from '@/utils/dictData'
import { getDictOptionList } from '@/utils/dictUtils'
import {
  getOrderBoxByBoxNo,
  getOrderSkuBySkuCode,
  updateOrderInfoForReceipt,
  getContainerByContainerCode
} from '@/api/business/warehouseManage/warehousing'
import { downloadPDF } from '@/utils/pdf'
import { scanFail, scanSuccess } from '@/utils/validate'
export default {
  name: 'Warehousing',
  components: { VueBarcode, vueEasyPrint },
  data() {
    return {
      checked: false,
      isShow: false,
      onePageRow: 5,
      userInfo: {
        userName: null,
        userId: null
      },
      boxId: null,
      containerId: null,
      orderId: null,
      orderNo: null,
      skuId: null,
      readonly: true,
      containerDisabled: true,
      skuDisabled: true,

      queryParams: {
        originalBox: 0,
        boxNumber: '',
        containerCode: '',
        skuCode: null,
        skuNum: 0, // sku 入库数量
        weightSizeData: [] // 重量尺寸数据
      },
      tableData: [], // 装箱清单数据
      uploadInfoData: [], // 上传
      data: [], // 操作成功
      multipleSelection: [], // el-table多选选中的值
      packageTypeDict: packageTypeDict,
      packageTypeOptions: getDictOptionList(packageTypeDict),
      rules: {},
      printContainerCode: ''
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userMsg
    const cachedOrderId = localStorage.getItem('cachedOrderId');
    if (cachedOrderId) {
      this.orderId = cachedOrderId;
      console.log(this.orderId)
    }
  },
  mounted() {
    this.$refs.input.focus()
    const cachedData = localStorage.getItem('uploadInfoData');
    if (cachedData) {
      this.uploadInfoData = JSON.parse(cachedData);
    } else {
      this.uploadInfoData = [];
    }
  },
  methods: {
    autoPrint() {
      this.$nextTick(() => {
        downloadPDF(this.$refs.autoPrint);
      })
    },
    changeBox(val) {
      this.queryParams.originalBox = +val
      console.log(this.queryParams.originalBox)
    },
    // 扫描箱号
    getBoxNumberInfo() {
      getOrderBoxByBoxNo({
        boxNo: this.queryParams.boxNumber,
        originalBox: this.queryParams.originalBox
      }).then(res => {
        scanSuccess()
        const data = res.data
        this.tableData = data.detailDTOList
        this.boxId = data.boxId
        this.orderId = data.orderId
        this.orderNo = data.orderNo
        this.printContainerCode = data.containerCode
        localStorage.setItem('cachedOrderId', this.orderId);
        if (data.containerCode && data.containerCode !== null) {
          this.containerId = data.containerId
          this.skuDisabled = false
          // 自动打印
          if (data.containerCode) {
            this.$nextTick(() => {
              // this.$refs.easyPrintBoxGeneral.print()
              this.autoPrint()
            })
          }
        }
        this.containerDisabled = false
        this.skuDisabled = true
        setTimeout(() => {
          this.$refs.containerCode.focus()
        }, 100)
      }).catch(() => {
        scanFail()
      })
    },
    // 扫描流转箱号
    getContainerCodeInfo() {
      this.queryParams.skuCode = null
      getContainerByContainerCode({
        orderId: this.orderId,
        containerNo: this.queryParams.containerCode
      }).then(res => {
        scanSuccess()
        this.containerId = res.data.containerId
        this.skuDisabled = false
        setTimeout(() => {
          this.$refs.skuCode.focus()
        }, 100)
      }).catch(() => {
        scanFail()
      })
    },
    // 扫描sku
    async getSkuCodeInfo() {
      // 先判断前后扫描的sku是否一致，如果不一致提示用户
      if (this.queryParams.weightSizeData.length !== 0) {
        // 不一致
        if (
          this.queryParams.skuCode !==
          this.queryParams.weightSizeData[0].skuCode
        ) {
          scanFail()
          this.$alert(
            this.$t('warehousingLang.SKUInconsistency') +
            this.$t('pleaseRescan'),
            this.$t('hint'),
            {
              confirmButtonText: this.$t('confirm'),
              callback: (action) => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`
                })
                this.queryParams.skuCode = null
              }
            }
          )
        } else {
          // sku 一致继续扫描 件数加1
          this.queryParams.skuCode = null
          this.queryParams.skuNum++
          scanSuccess()
        }
      } else {
        // 判断流转箱是否绑定
        if (this.uploadInfoData.length !== 0) {
          const isSameContainer = this.uploadInfoData.find(item => item.containerCode === this.queryParams.containerCode)
          if (isSameContainer) {
            if (this.queryParams.skuCode !== isSameContainer.skuCode) {
              scanFail()
              this.$alert(
                this.$t('warehousingLang.SKUSameType'),
                this.$t('hint'),
                {
                  confirmButtonText: this.$t('confirm'),
                  callback: (action) => {
                    this.$message({
                      type: 'info',
                      message: `action: ${action}`
                    })
                    // this.queryParams.containerCode = null
                    this.queryParams.skuCode = null
                    this.$refs.skuCode.focus()
                    this.queryParams.weightSizeData = []
                    // this.queryParams.skuNum = 0
                  }
                }
              )
              // 流转箱已绑定，重新扫描流转箱sku
              return
            } else {
              scanSuccess()
              const res = await getOrderSkuBySkuCode({
                skuCode: this.queryParams.skuCode,
                boxId: this.boxId,
                containerId: this.containerId,
                orderId: this.orderId
              })
              const arr = []
              arr.push(res.data)
              this.queryParams.weightSizeData = arr
              this.skuId = res.data.skuId
              this.queryParams.skuNum++
              this.queryParams.skuCode = null
            }
          } else {
            getOrderSkuBySkuCode({
              skuCode: this.queryParams.skuCode,
              boxId: this.boxId,
              containerId: this.containerId,
              orderId: this.orderId
            }).then(res => {
              scanSuccess()
              if (res.data?.hasBinding) {
                this.$alert(
                  this.$t('containerLang.container') +
                  this.queryParams.containerCode +
                  this.$t('statusLang.Bound') +
                  this.$t('warehousingLang.pleaseReplaceTheFlowBox'),
                  this.$t('hint'),
                  {
                    confirmButtonText: this.$t('confirm'),
                    callback: (action) => {
                      this.$message({
                        type: 'info',
                        message: `action: ${action}`
                      })
                      this.queryParams.containerCode = null
                      this.queryParams.skuCode = null
                      this.queryParams.weightSizeData = []
                      this.queryParams.skuNum = 0
                      this.$refs.containerCode.focus()
                    }
                  }
                )
                // 流转箱已绑定，重新扫描流转箱sku
                return
              }
              const arr = []
              arr.push(res.data)
              this.queryParams.weightSizeData = arr
              this.skuId = res.data.skuId
              this.queryParams.skuNum++
              this.queryParams.skuCode = null
            }).catch(() => {
              scanFail()
            })
          }
        } else {
          getOrderSkuBySkuCode({
            skuCode: this.queryParams.skuCode,
            boxId: this.boxId,
            containerId: this.containerId,
            orderId: this.orderId
          }).then(res => {
            scanSuccess()
            if (res.data?.hasBinding) {
              this.$alert(
                this.$t('containerLang.container') +
                this.queryParams.containerCode +
                this.$t('statusLang.Bound') +
                this.$t('warehousingLang.pleaseReplaceTheFlowBox'),
                this.$t('hint'),
                {
                  confirmButtonText: this.$t('confirm'),
                  callback: (action) => {
                    this.$message({
                      type: 'info',
                      message: `action: ${action}`
                    })
                    this.queryParams.containerCode = null
                    this.queryParams.skuCode = null
                    this.queryParams.weightSizeData = []
                    this.queryParams.skuNum = 0
                    this.$refs.containerCode.focus()
                  }
                }
              )
              // 流转箱已绑定，重新扫描流转箱sku
              return
            }
            const arr = []
            arr.push(res.data)
            this.queryParams.weightSizeData = arr
            this.skuId = res.data.skuId
            this.queryParams.skuNum++
            this.queryParams.skuCode = null
          }).catch(() => {
            scanFail()
          })
        }
      }
    },
    // 提交
    async handleSubmit() {
      const [err] = await to(this.$refs.form.validate())
      if (err === null) {
        // 判断预报数量与入库数量是否一致
        for (let i = 0; i < this.tableData.length; i++) {
          const tempArr1 = this.tableData[i]
          for (let j = 0; j < this.queryParams.weightSizeData.length; j++) {
            const tempArr2 = this.queryParams.weightSizeData[j]
            if (tempArr1.skuCode === tempArr2.skuCode) {
              if (this.queryParams.skuNum < tempArr1.preSkuNum) {
                console.log('入库数量小于预报数量')
                // 判断sku 数量是否大于预报数量，
                const flag = await this.$confirm(
                  'sku:' +
                  tempArr1.skuCode +
                  this.$t(
                    'warehousingLang.preSkuNumIsInconsistentWithReceiptQuantity'
                  ) +
                  this.$t('warehousingLang.pleaseConfirmWhetherToUpload') +
                  '?',
                  this.$t('hint'),
                  {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                    type: 'warning'
                  }
                ).catch((err) => err)
                if (flag === 'cancel') {
                  this.$message({
                    type: 'info',
                    message: this.$t('warehousingLang.cancelUpload')
                  })
                  return
                } else {
                  this.$message({
                    type: 'success',
                    message: this.$t(
                      'warehousingLang.subjectToTheWarehousingQuantity'
                    )
                  })
                }
                // }
              } else if (this.queryParams.skuNum > tempArr1.preSkuNum) {
                console.log('测试2', '入库数量大于预报数量')
                this.$message({
                  type: 'success',
                  // message: this.$t(
                  //   "warehousingLang.subjectToTheWarehousingQuantity"
                  // ),
                  message: 'sku 入库数量 大于预报数量请重新输入或扫描'
                })
                return
              }
              console.log('测试3')
              // 判断如果提交栏中已经有箱号 流转箱 sku 相同的值 skuNum 相加
              let index = -1
              const weightSizeData = this.queryParams.weightSizeData[0]
              const isHave = this.uploadInfoData?.find(item =>
                item.boxNumber !== this.queryParams.boxNumber &&
                item.skuCode !== weightSizeData.skuCode &&
                item.containerCode === this.queryParams.containerCode
              )
              if (isHave) {
                this.$alert(
                  this.$t('warehousingLang.SKUSameType'),
                  this.$t('hint'),
                  {
                    confirmButtonText: this.$t('confirm'),
                    callback: (action) => {
                      this.$message({
                        type: 'info',
                        message: `action: ${action}`
                      })
                    }
                  }
                )
                return
              }
              this.uploadInfoData.forEach((item, i) => {
                const arr1 = item
                const arr2 = this.queryParams
                if (
                  arr1.boxNumber === arr2.boxNumber &&
                  arr1.skuCode === arr2.weightSizeData[0].skuCode &&
                  arr1.containerCode === arr2.containerCode
                ) {
                  index = i
                  this.uploadInfoData[i].receiptNum += arr2.skuNum
                }
              })
              if (index === -1) {
                const newItem = {
                  boxId: this.boxId,
                  skuId: this.skuId,
                  containerId: this.containerId,
                  inStockType: this.queryParams.weightSizeData[0].inStockType,
                  packagingType: this.queryParams.weightSizeData[0].packagingType,
                  containerCode: this.queryParams.containerCode,
                  skuCode: this.queryParams.weightSizeData[0].skuCode,
                  boxNumber: this.queryParams.boxNumber,
                  receiptNum: this.queryParams.skuNum,
                  skuWeight: this.queryParams.weightSizeData[0].skuWeight,
                  skuLength: this.queryParams.weightSizeData[0].skuLength,
                  skuWidth: this.queryParams.weightSizeData[0].skuWidth,
                  skuHeight: this.queryParams.weightSizeData[0].skuHeight,
                  operationDate: new Date().toLocaleString(),
                  operator: this.userInfo.userName,
                };
                this.uploadInfoData.push(newItem);

                // 更新 localStorage
                localStorage.setItem('uploadInfoData', JSON.stringify(this.uploadInfoData));
              }
              this.checked = false
              this.queryParams = {
                boxNumber: null,
                containerCode: null,
                skuCode: null,
                skuNum: 0,
                weightSizeData: []
              }
              this.$refs.input.focus()
              this.containerDisabled = true
              this.skuDisabled = true
            }
          }
        }
        this.tableData = []
      } else {
        this.$message.error({
          message: this.$t('warehousingLang.pleaseComplete')
        })
      }
    },
    // 上传
    async handleUpload() {
      console.log(this.uploadInfoData, '1')
      if (this.multipleSelection.length > 0) {
        console.log(this.uploadInfoData, '2')
        const res = await updateOrderInfoForReceipt({
          fromTerminal: 0, // 数据来源  0 PC 1 PDA
          modifiedUser: this.userInfo.userId, // 操作人
          orderId: this.orderId,
          orderInfoForReceiptList: this.uploadInfoData
        })
        console.log(this.uploadInfoData, '3')
        if (res.returnCode === 10000) {
          this.$message({
            type: 'success',
            message: this.$t('warehousingLang.uploadSuccess')
          })
          // 获取现有的缓存数据
          const existingData = JSON.parse(localStorage.getItem('uploadInfoData')) || [];
          // 从现有数据中删除已上传的数据
          const remainingData = existingData.filter(existingItem =>
            !this.uploadInfoData.some(uploadedItem => uploadedItem.id === existingItem.id)
          );
          // 更新 localStorage
          localStorage.setItem('uploadInfoData', JSON.stringify(remainingData));
        }
        this.uploadInfoData = []
      } else {
        this.$message({
          type: 'warning',
          message: this.$t('pleaseSelect')
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除
    deleteSelectItem() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: this.$t('pleaseSelect')
        })
        return
      }
      this.$confirm(this.$t('delete') + '?', this.$t('hint'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.multipleSelection.forEach((value, index) => {
            this.uploadInfoData.forEach((v, i) => {
              if (
                value.boxNumber === v.boxNumber &&
                value.containerCode === v.containerCode &&
                value.skuCode === v.skuCode
              ) {
                this.uploadInfoData.splice(i, 1)
              }
            })
          })
          // 更新 localStorage
          localStorage.setItem('uploadInfoData', JSON.stringify(this.uploadInfoData));
          this.$message({
            type: 'success',
            message: this.$t('deleteSuccess')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('cancel')
          })
        })
    },
    changeToInputMode() {
      this.readonly = !this.readonly
    },
    changeToScanMode() {
      this.readonly = !this.readonly
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsInfo {
  display: flex;
  justify-content: space-between;
}

.active {
  color: red;
}

.el-input-scan {
  width: 40%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  background-color: #f59a23;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 15px;
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
